<template>
  <div class="tabs flexbox flex-align-center">
    <div :class="['tab', tabId == item.id ? 'active' : '']" v-for="item in list" :key="item.id" @click="changeTab(item)">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showActive: {
        type: Boolean,
        default: true
      },
      activeType: {
        type: String,
        default: 'weight'
      },
      activeId: {
        type: String | Number,
        default: ''
      },
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        tabId: this.activeId,
        list: this.dataList
      }
    },
    watch: {
      activeId: {
        handler(newVal) {
          this.tabId = newVal
        },
        deep: true,
        immated: true
      }
      // 'dataList':{
      //   handler (newVal) {
      //     this.list=newVal
      //   },
      //   deep:true,
      //   immated:true
      // }
    },
    computed: {},
    created() {},
    methods: {
      changeTab(item) {
        if (this.showActive) {
          this.tabId = item.id
        }
        this.$emit('targetTab', item)
      }
    }
  }
</script>
<style lang="less" scoped>
  .tabs {
    // padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    height: 36px;
    .tab {
      margin-right: 24px;
      font-size: 14px;
      color: @font-color-99;
      flex-shrink: 0;
    }
    .tab.active {
      position: relative;
      font-weight: 500;
      font-size: 16px;
      color: @font-color-14;
    }
    .tab.active::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      bottom: -4px;
      width: 16px;
      height: 2px;
      background: #383838;
      border-radius: 3px;
      transform: translateX(-50%);
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
  }
  @media screen and (max-width: 767px) {
  }
</style>
